<template>
  <div class="app-container">
    <div style="margin-bottom:10px">
      <div>
        <el-input v-model="search" placeholder="员工偏号／姓名／手机号"></el-input>
        <el-button type="primary" size="small">新增分校</el-button>
      </div>
    </div>
    <el-table
      :data="data"
      border
      fit
      style="width: 100%;"
      height="730px"
      :element-loading-text="global.loadingStr"
      :header-cell-style="{background:global.mainColor}"
    >
      <el-table-column prop="paidInAmount" label="工号" align="center" />
      <el-table-column prop="paidInAmount" label="部门" align="center" />
      <el-table-column prop="paidInAmount" label="职位" align="center" />
      <el-table-column prop="paidInAmount" label="姓名" align="center" />
      <el-table-column prop="paidInAmount" label="联系手机号" align="center" />
      <el-table-column prop="paidInAmount" label="创建时间" align="center" />
      <el-table-column prop="paidInAmount" label="状态" align="center" />
      <el-table-column prop="actualCollection" label="操作" align="center" width="300">
        <template slot-scope="{row}">
          <el-button type="success" size="mini">启用</el-button>
          <el-button type="primary" size="mini">编辑</el-button>
          <el-button type="warning" size="mini">详情</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" style="margin-top:10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-row>
    <!-- 更换校长 -->
    <el-dialog
      :visible.sync="principalName.dialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="1"
      width="800px"
    >
      <h4 slot="title">{{principalName.title}}</h4>
      <div style="margin-bottom:10px">
        提示：更换分校校长，需要把目前的分校校长先禁用，才能进行新增校长或者启用之前的分校校长
      </div>
      <el-table
        :data="data"
        border
        fit
        style="width: 100%;"
        :element-loading-text="global.loadingStr"
        :header-cell-style="{background:global.mainColor}"
        >
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
          <el-table-column label="校长（负责人）" align="center" width="160">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="160">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="w" label="登录账号" align="center" />
            <el-table-column label="操作" align="center" width="160">
            <template slot-scope="{row}">
              <el-button size="mini" type="danger">禁用</el-button>
              <el-button size="mini" type="success">启用</el-button>
            </template>
          </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectByConditions } from '@/api/mechanism'

export default {
  name: 'MechanismList',
  data() {
    return {
      currentRow: {},
      search: '',
      data: [],
      page: 1,
      pageSize: 10,
      total: 0,
      principalName: {
        dialog: false,
        title: '',
        data: []
      }
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  filters: {
    status(v) {
      switch (v) {
        case 1:
          v = '待审核'
          break

        case 2:
          v = '上架'
          break

        case 3:
          v = '下架'
          break
      }
      return v
    }
  },
  created() {
    this.getList()
  },
  methods: {
    replaceCommission(row) {
      this.currentRow = row
      this.principalName.dialog = true
      this.principalName.title = `${row.name} 更换校长`
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    getList() {
      selectByConditions({
        'parentId': '',
        'currentPage': 1,
        'pageSize': 10,
        'status': 2,
        'name': ''
      }).then(res => {
        console.log(res, 'lllllllllll')
        this.data = res.data
      })
    }
  }
}
</script>
